<header class="header">
  <div class="flex">
    <i class="logo" [nzIconfont]="'icon-fenlei-dota'" nz-icon></i>
    <h1>无兄弟不刀塔</h1></div>
  <div class="me">
    <button nz-button nz-dropdown [nzDropdownMenu]="menu" [nzPlacement]="'bottomCenter'">
      {{userName}}
      <i nz-icon nzType="down"></i>
    </button>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
<!--        <li nz-menu-item>-->
<!--          <div class="item" [routerLink]="['/profile', 'setting']"><i nz-icon nzType="setting" nzTheme="outline"></i>&nbsp;&nbsp;个人中心</div>-->
<!--        </li>-->
        <li nz-menu-item (click)="logout()">
          <div class="item"><i nz-icon nzType="logout" nzTheme="outline"></i>&nbsp;&nbsp;注销登录</div>
        </li>
      </ul>
    </nz-dropdown-menu>
  </div>
</header>
<div class="body">
  <div class="title">当前队伍：</div>
  <ul class="team flex">
    <li class="item" *ngFor="let item of currentBrothers">
      <div class="wrap">
        <div class="card flex">
          <div class="me" *ngIf="item.id === me">
            <div>我</div>
          </div>
          <div class="tumor" *ngIf="item.isTumor">
            <div>瘤</div>
          </div>
          <img alt="" [src]="item.avatar || '../../assets/images/head-default.jpeg'" class="avatar"/>
          <div class="nickname">{{item.nickName}}</div>
          <div style="min-height: 80px">
            <ng-container *ngIf="item.isPrepared">
              <div class="prepare">已准备</div>
              <div class="position flex">
                <span class="head">位置：</span>
                <ul class="detail flex">
                  <li class="p-item" *ngFor="let p of item.positions">
                    <nz-tag [nzColor]="'#0E75CE'">{{p|position}}</nz-tag>
                  </li>
                </ul>
              </div>
            </ng-container>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <div class="choose-mime" *ngIf="!isDispatch">
    <div class="head">选择我的位置：<span class="tips">（只选了一个位置的视为‘毒瘤’）</span></div>
    <ul class="positions flex">
      <li class="item"
          (click)="choose(item.id)"
          *ngFor="let item of choosePositions"
          [ngClass]="{'selected': positions.includes(item.id)}">{{item.name}}
        <ng-container *ngIf="positions.includes(item.id)">&nbsp;<i nz-icon nzType="check" nzTheme="outline"></i>
        </ng-container>
      </li>
    </ul>
    <div class="prepare">
      <button nz-button nzType="primary" *ngIf="!isPrepared" [nzSize]="'large'" (click)="prepare()">准备</button>
      <button nz-button [nzSize]="'large'" *ngIf="isPrepared" (click)="cancelPrepare()">取消</button>
    </div>
  </div>
  <div class="result" *ngIf="isDispatch">
    <nz-divider [nzText]="text" nzOrientation="left">
      <ng-template #text>
        <span class="head">抽签结果</span>
      </ng-template>
    </nz-divider>
    <ul class="result-d flex">
      <li class="item" *ngFor="let item of resultPositions;let $index = index">
        <div class="wrap">
          <div class="card flex">
            <ng-container *ngIf="null != item">
              <div class="me" *ngIf="item.id === me">
                <div>我</div>
              </div>
              <div class="tumor" *ngIf="item.isTumor">
                <div>瘤</div>
              </div>

              <img alt="" src="../../../assets/images/head-default.jpeg" class="avatar"/>
              <div class="nickname">{{item.nickName}}</div>
              <div class="position">{{$index + 1}}号位
              </div>
            </ng-container>
            <ng-container *ngIf="null == item">
              <div class="nobody">虚位以待</div>
            </ng-container>
          </div>
        </div>
      </li>
    </ul>
    <div class="game-result">
      <button nz-button nzSize="large" nzType="primary" (click)="submitResult(1)">胜</button>&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;<button nz-button nzSize="large" nzType="danger" (click)="submitResult(2)">败</button>&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;<button nz-button nzSize="large" (click)="submitResult(3)">放弃</button>
    </div>
  </div>
</div>

<ng-template #notificationTemplate>
  <div class="ant-notification-notice-content">
    <div class="ant-notification-notice-with-icon">
          <span class="ant-notification-notice-icon">
            <i *ngIf="notificationType === 1" nz-icon nzIconfont="icon-enter" style="color: green"></i>
            <i *ngIf="notificationType === 2" nz-icon nzIconfont="icon-out" style="color: red"></i>
            <i *ngIf="notificationType === 3" nz-icon nzIconfont="icon-out" style=""></i>
            <i *ngIf="notificationType === 4" nz-icon nzIconfont="icon-lujing" style=""></i>
            <i *ngIf="notificationType === 5" nz-icon nzIconfont="icon-sad" style=""></i>
            <i *ngIf="notificationType === 6" nz-icon nzIconfont="icon-info" style=""></i>
          </span>
      <div class="ant-notification-notice-message">{{notificationMessage}}</div>
      <div class="ant-notification-notice-description">

      </div>
    </div>
  </div>
</ng-template>
